<template>
  <div class="mainus_pe">
    <div v-if="!is_edit">
      <span> {{ number_data }}</span>
      <svg
        aria-hidden="true"
        class="main_page_svg"
        @click="handleEdit"
        width="13"
        height="13"
      >
        <use xlink:href="#icon-commodity_modify" />
      </svg>
    </div>
    <div v-if="is_edit" class="boxnr">
      <el-input-number
        v-model.trim="number_data"
        placeholder="采购价"
        :controls="false"
        class="wid80"
        :precision="precision"
        @blur="handleSave"
        @keyup.native.enter="handleSave"
      ></el-input-number>
      <div class="boxnr svg_box">
        <svg
          aria-hidden="true"
          class="main_page_svg marginLeft5"
          @click="handleSave"
          width="20"
          height="20"
        >
          <use xlink:href="#icon-index_tick" />
        </svg>
        <svg
          aria-hidden="true"
          class="main_page_svg marginLeft5"
          @click="handleCancel"
          width="12"
          height="12"
        >
          <use xlink:href="#icon-index_cross" />
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    number: {
      type: Number | String,
    },
    is_standard: {
      type: Number | String,
    },
  },
  data() {
    return {
      number_data: null,
      old_val: "",
      is_edit: false,
    };
  },
  watch: {
    number: {
      handler(val, oldval) {
        this.number_data = parseFloat(val);
        this.old_val = parseFloat(val);
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    precision() {
      let precision = 2;
      if (this.is_standard !== "undefind") {
        precision = this.is_standard == 1 ? 0 : 2;
      }
      return precision;
    },
  },
  methods: {
    handleEdit(val) {
      this.is_edit = true;
    },
    handleSave() {
      let val = this.number_data;
      if (/^(\d+\.?)?\d{0,2}$/.test(parseFloat(val)) && val != "") {
        this.is_edit = false;
        this.send_data();
      } else {
        this.$message.error("请输入数字");
      }
    },
    handleCancel() {
      this.is_edit = false;
      this.number_data = this.old_val;
      this.send_data();
    },
    send_data() {
      // console.log("nihap ");
      this.$emit("get_data", this.number_data);
    },
  },
};
</script>
<style lang='scss' scoped>
.svg_box {
  display: flex;
  flex-direction: column;
  transform: translateY(-2px);
}
/deep/.el-input-number .el-input__inner {
  text-align: left;
}
</style>
